<template>
    <div>
        <div>
            <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div style="width: 336px;height: 100px;margin: 30px auto;">
            <span class="p1">设置新密码</span><br>
            <span class="p2">请输入新密码，并重新登录验证:密码只限8-20位的数字、字母和符号的组合，不支持空格。</span>
        </div>
        <div style="margin-top:70px;position: relative;">
            <input type="text" v-model="pwd" placeholder="请输入新密码" class="ipt2">
            <button class="btn2" @click="edit">确定</button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import axios from 'axios'
const onClickLeft = () => history.back();
let pwd = ref('')
const edit = async() => {
    let obj = {
        phone: sessionStorage.getItem('tel'),
        password: pwd.value
    }
    let res = await axios.post('http://localhost:3000/updatepwd', obj)
    console.log(res.data);
    router.push('/register_two')
}
</script>

<style lang="scss" scoped>
.p1 {
    font-size: 30px;
    font-weight: 500;

}

.p2 {
    font-size: 14px;
    color: #999;

}

.ipt1 {
    width: 100%;
    height: 70px;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: 1px solid rgb(204, 199, 199);
    font-size: 18px;
    padding-left: 20px;
}

.ipt2 {
    width: 100%;
    height: 70px;
    border-left: none;
    border-right: none;
    border-top: 1px solid rgb(204, 199, 199);
    border-bottom: 1px solid rgb(204, 199, 199);
    font-size: 18px;
    padding-left: 20px;
}

.btn1 {
    width: 120px;
    height: 35px;
    background-color: rgb(255, 255, 255);
    border:none;
    position: absolute;
    top: 20px;
    right: 15px;
    color: #999;
}

.btn2 {
    width: 300px;
    height: 50px;
    border: none;
    background-color: rgb(36, 153, 248);
    border-radius: 10px;
    color: white;
    margin-top: 30px;
    margin-left: 45px;
    font-size: 18px
}
</style>